import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqgetcate, reqgetgoodslist } from '../../http/api'
import { SideBar } from 'antd-mobile'
import { NavLink } from 'react-router-dom'
import "./Cate.less"
// import { DemoBlock } from 'demos'
export default class Cate extends Component {
    constructor() {
        super()
        this.state = {
            cates: [

            ],
            goodlis: [],
            activeKey: "1",

        }
    }
    componentDidMount() {
        reqgetcate().then(res => {
            console.log(res);
            this.setState({
                cates: res.data.list
            })
        });
        reqgetgoodslist({ fid: 1 }).then(res => {
            console.log(res);
            this.setState({
                goodlis: res.data.list
            })
        })

    }
    cahngetabe(e) {
        // console.log(e);
        reqgetgoodslist({ fid: e }).then(res => {
            this.setState({
                goodlis: res.data.list
            })

        })
        this.setState({
            activeKey: e,

        });


    }
    render() {
        let { cates, activeKey, goodlis } = this.state
        return (
            <div>
                <Header title="分类" back></Header>

                <div style={{ display: 'flex' }}>
                    <div className= "dm-side-bar">
                        <SideBar className="adm-side-bar" activeKey={activeKey} onChange={(e) => this.cahngetabe(e)}>
                            {cates.map(item => (
                                <SideBar.Item key={item.id} title={item.catename} />
                            ))}
                        </SideBar>
                    </div>
                    <div className="GoodList">
                        <h3>热门精选</h3>

                        {
                            goodlis.map((item, index) => {
    
                                return (<NavLink key={item.id} to={"/detail/"+item.id+'/'+item.goodsname}>
                                    <div key={item.id} hidden={activeKey !== activeKey.toString()}>
                                        <div className="box">
                                            <div className="box-left"><img src={item.img} alt="" /></div>

                                            <div className="box-right">
                                                <p><span>限时</span><b>{item.goodsname}</b></p>
                                                <h4>￥{item.price}<i>加入购物车</i></h4>
                                            </div>
                                        </div>
                                    </div>
                                </NavLink>)

                            })
                        }

                    </div>
                </div>

            </div>
        )
    }
}
